<template>
    <view style="background-color: #f4f5f7;
height: 100vh;" >
         <u-navbar :is-back="true"  :custom-back='BackM' title="订单详情" back-text='' >
         <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<view style="margin-right: 0.5rem;font-size: 0.78rem;font-family: PingFang SC;font-weight: 300;color: #02B074;" >
                结束订单
                <!-- <img @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/A20.png" alt=""> -->
                </view>
		 </view>
         </u-navbar>

         <view style="display: flex;
justify-content: space-between;
padding: 0.5rem">
            <view style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" > 订单号：203164778 </view>
            <view style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >租借中</view>
         </view>


         <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.phone}}</view>
                           </view>
         </view>

         <view style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
padding: 0.3rem;
">
            -付款信息-
         </view>


         <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.phone}}</view>
                           </view>
         </view>

             <view style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
padding: 0.3rem;
background-color: #f4f5f7;
">
            -分润详情-
         </view>


         <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.phone}}</view>
                           </view>
         </view>









    </view>
    </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public showDatasList = [
    {
      name: "租借时间",
      phone: "2020.09.03 11:04:19",
    },
    {
      name: "租借商户",
      phone: "拉卡拉总代理",
    },
    {
      name: "租借地点",
      phone: "13454345688",
    },
    {
      name: "归还时间",
      phone: "-----",
    },
    {
      name: "租借时间",
      phone: "2020.09.03 11:04:19",
    },
    {
      name: "租借商户",
      phone: "拉卡拉总代理",
    },
    {
      name: "租借地点",
      phone: "13454345688",
    },
    {
      name: "归还时间",
      phone: "-----",
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  addPosM() {
    uni.navigateTo({
      url: "./cargoPos",
    });
  }
  goBackM() {
    uni.navigateTo({
      url: "./index",
    });
  }
}
</script>

<style  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
}

/* 加上标签 或者加上>   */
.agentprolify {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
}

.agentprolify :first-child {
  font-size: 0.72rem;
  font-family: "PingFang SC";
  font-weight: 300;
  color: #666666;
}

.agentprolify > :nth-child(1) {
}
.agentprolify > :nth-child(2) {
  color: red;
}
.cargoBtn {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #000000;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
</style>